Sé que a veces es necesario configurar el displayName , especialmente cuando se trata de compilaciones de producción. Quiero saber cómo configurarlo usando mi componente funcional. ¿Es posible/permitido?
Esto es lo que tengo en mi componente de clase:
const MyComponent = React.createClass({ displayName: 'HeyHey', render: function() { console.log(this.displayName); } });¿Cómo hago lo mismo dentro de un componente sin estado?
Los documentos para displayName dicen
La cadena
displayNamese utiliza en la depuración de mensajes. Por lo general, no necesita configurarlo explícitamente porque se deduce del nombre de la función o clase que define el componente. Es posible que desee configurarlo explícitamente si desea mostrar un nombre diferente para fines de depuración o cuando crea un componente de orden superior; consulte Ajustar el nombre para mostrar para una fácil depuración para obtener más información.
En su caso, simplemente usaría
const MyComponent = (props) => { ... } MyComponent.displayName = 'HeyHey' O puede usar Object.assign
const MyComponent = Object.assign ( props => { ... } , { displayName: 'HeyHey' } )Lo averigué
const MyComponent = props => { return ( <p>How you doin?</p> ) } MyComponent.displayName = "MyComponent"React necesita displayName para los componentes funcionales cuando se definen como funciones de flecha o el nombre de la función en sí.
Así que para las funciones de flecha:
const SomeComponent = () => <p>I come from an arrow function</p> SomeComponent.displayName = 'HeyHey' Si usa una función, usará su nombre como displayName sin tener que definirla por separado:
function HeyHey() { return <p>I come from a non-arrow function!</p> }